@media (prefers-color-scheme: light) {
  body {
    --background-color: #fff;
    --inner-color: #f8f9fa;
    --inner-text-color: #888;
    --primary-color: #1890ff;
    --primary-text-color: #eee;
    --cancel-color: #dfdfdf;
    --cancel-text-color: #454545;
    --increase-color: #f5222d;
    --increase-bg-color: #fff1f0;
    --reduce-color: #52c41a;
    --reduce-bg-color: #f6ffed;
    --warn-color: #faad14;
    --main-text-color: #333;
    --secondary-main-text-color: #888;
    --reverse-text-color: #808080;
    --border-color: #f3f4f5;
    --alipay-color: #156dff;
    --wechat-color: #1fa131;
    --svg-icon-color: #333;
    --blur-color: rgba(255, 255, 255, 0.5);
    --hover-color: #e6f7ff;
    --selected-color: #bae7ff;
    --tag-text-color: #fff;

    &.lowKey {
      --inner-color: #eee;
      --primary-color: #000;
      --increase-color: #111;
      --reduce-color: #333;
      --warn-color: #222;
      --main-text-color: #333;
      --border-color: #dfdfdf;
      --hover-color: #efefef;
      --tag-text-color: #eee;
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: #1e1e1e;
    --inner-color: #333;
    --inner-text-color: #888;
    --primary-color: #1890ff;
    --primary-text-color: #eee;
    --cancel-color: #313131;
    --cancel-text-color: #ccc;
    --increase-color: #d32029;
    --increase-bg-color: #2a1215;
    --reduce-color: #49aa19;
    --reduce-bg-color: #162312;
    --warn-color: #d89614;
    --main-text-color: #eee;
    --secondary-main-text-color: #888;
    --reverse-text-color: #8f8f8f;
    --border-color: #181818;
    --alipay-color: #156dff;
    --wechat-color: #1fa131;
    --svg-icon-color: #ccc;
    --blur-color: rgba(33, 33, 33, 0.3);
    --hover-color: #111d2c;
    --selected-color: #112a45;
    --tag-text-color: #eee;

    &.lowKey {
      --background-color: #000;
      --primary-color: #fff;
      --primary-text-color: #333;
      --cancel-text-color: #dfdfdf;
      --increase-color: #eee;
      --reduce-color: #ccc;
      --warn-color: #ddd;
      --main-text-color: #eee;
      --tag-text-color: #111;
    }

    // antd
  }
}

body {
  // antd
  --primaryColor: var(--primary-color);
  --componentBackground: var(--background-color);
  --contrastBackground: var(--border-color);
  --borderColor: var(--border-color);
  --primaryHover: var(--hover-color);
  --itemHoverBackground: var(--hover-color);
  --textColor: var(--main-text-color);
}

body {
  --base-font-size: 12;
  --base-padding: 10px;
  --base-radius: 10px;
}
